<template>
  <lay-card :bordered="true">
    <ContentHeader />
    <Loading :loading="isLoading">
      <!-- 操作区域 -->
      <TableAction>
        <lay-row>
          <lay-col :span="8" :offset="10">
            <lay-input
              size="xs"
              style="max-width: 200px; min-width: 100px"
              v-model="queryParam.search"
              placeholder="请输入菜单名称/菜单路径"
              allow-clear
            />
            <lay-button size="xs" style="margin-left: 10px" @click="handleSearch"
              >查询</lay-button
            >
            <lay-button size="xs" v-auth:add type="primary" @click="handleAdd"
              >新增</lay-button
            >
          </lay-col>
        </lay-row>
      </TableAction>

      <!-- 表格内容 -->
      <lay-table
        ref="table"
        :id="'menu_id'"
        children-column-name="children"
        :size="'xs'"
        :resize="true"
        :autoColsWidth="false"
        :default-toolbar="false"
        :maxHeight="'500px'"
        :width="'100%'"
        :loading="isLoading"
        :columns="columns"
        :data-source="data_list"
        :expand-index="1"
        :indent-size="20"
        skin="line"
        :default-expand-all="true"
      >
        <!-- 菜单路径 -->
        <template #path="{ row }">
          {{ row.path ? row.path : "-" }}
        </template>

        <!-- 页面文件路径 -->
        <template #file_path="{ row }">
          {{ row.file_path ? row.file_path : "-" }}
        </template>

        <!-- 是否隐藏	 -->
        <template #hidden="{ row }">
          <lay-tag size="xs" :color="row.hidden ? '' : '#1e9fff'" variant="light">
            {{ row.hidden ? "隐藏" : "显示" }}
          </lay-tag>
        </template>

        <!-- 是否缓存	 -->
        <template #keepAlive="{ row }">
          <lay-tag size="xs" :color="row.keepAlive ? '' : '#1e9fff'" variant="light">
            {{ row.keepAlive ? "是" : "否" }}
          </lay-tag>
        </template>

        <!-- 查看/操作 -->
        <template #permission="{ row }">
          <lay-button-container style="max-width: 200px">
            <template v-for="(item, index) in row.permission" :key="index">
              <lay-tooltip trigger="click" position="left">
                <lay-button size="xs">
                  {{ item.name }}
                </lay-button>
                <template #content>
                  <lay-card>
                    <template #title> 【{{ item.name }}】操作选项： </template>
                    <lay-button-container>
                      <lay-button
                        size="xs"
                        border="blue"
                        v-auth:bindApi
                        @click="handleBindApi(row, item)"
                        >绑定API</lay-button
                      >
                      <lay-button
                        size="xs"
                        type="primary"
                        v-auth:editAuth
                        @click="handleEditAuth(row, item)"
                        >编辑权限</lay-button
                      >
                      <lay-button
                        size="xs"
                        type="danger"
                        v-auth:delete
                        @click="handleDelete(item)"
                        >删除</lay-button
                      >
                    </lay-button-container>
                  </lay-card>
                </template>
              </lay-tooltip>
            </template>
          </lay-button-container>
        </template>

        <!-- 操作 -->
        <template #action="{ row }">
          <lay-button size="xs" type="primary" v-auth:edit @click="handleEdit(row)"
            >编辑</lay-button
          >
          <lay-tooltip trigger="click" position="left">
            <lay-button size="xs" border="blue">更多</lay-button>
            <template #content>
              <lay-card>
                <template #title> 【{{ row.name }}】操作选项： </template>
                <lay-button-container style="max-width: 200px">
                  <lay-button
                    size="xs"
                    border="blue"
                    v-auth:bindApi
                    @click="handleBindApi(row, row)"
                    >绑定API</lay-button
                  >
                  <lay-button
                    size="xs"
                    type="primary"
                    v-auth:addAuth
                    @click="handleAddAuth(row)"
                    >新增权限</lay-button
                  >
                  <lay-button
                    size="xs"
                    type="danger"
                    v-auth:delete
                    @click="handleDelete(row)"
                    >删除</lay-button
                  >
                </lay-button-container>
              </lay-card>
            </template>
          </lay-tooltip>
        </template>
      </lay-table>
    </Loading>
    <AddForm ref="AddFormRef" @callback="handleSearch" />
    <EditForm ref="EditFormRef" @callback="handleSearch" />

    <AddAuth ref="AddAuthRef" @callback="handleSearch" />
    <EditAuth ref="EditAuthRef" @callback="handleSearch" />
    <BindApi ref="BindApiRef" @callback="handleSearch" />
  </lay-card>
</template>

<script setup>
import { ref } from "vue";
import * as Api from "@/api/menu/index";
// import { refreshScrollTop } from "@/utils/tool";
import { info } from "@/utils/message";
import { layer } from "@layui/layui-vue";

import AddForm from "./modules/AddForm.vue";
import EditForm from "./modules/EditForm.vue";

import AddAuth from "./modules/AddAuth.vue";
import EditAuth from "./modules/EditAuth.vue";

import BindApi from "./modules/BindApi.vue";

const table = ref(undefined);
// 数据列表
const data_list = ref([]);
// 查询参数
const queryParam = ref({
  page: 1,
  limit: 10,
  total: 0,
  search: "",
});
// 正在加载
const isLoading = ref(false);
// 表头
const columns = ref([
  {
    title: "菜单ID",
    key: "menu_id",
    width: "100px",
    align: "left",
  },
  {
    title: "ID/名称",
    key: "name",
    width: "200px",
    fixed: "left",
    align: "left",
  },
  {
    title: "菜单路径",
    width: "180px",
    key: "path",
    customSlot: "path",
    align: "center",
  },
  {
    title: "页面文件路径",
    width: "180px",
    key: "file_path",
    customSlot: "file_path",
    align: "center",
  },
  {
    title: "是否隐藏",
    key: "hidden",
    width: "80px",
    customSlot: "hidden",
    align: "center",
  },

  {
    title: "是否缓存",
    key: "keepAlive",
    width: "80px",
    customSlot: "keepAlive",
    align: "center",
  },
  {
    title: "排序",
    width: "100px",
    key: "sort",
    align: "center",
  },
  {
    title: "添加时间",
    width: "180px",
    key: "create_time",
    align: "center",
  },
  {
    title: "更新时间",
    width: "180px",
    key: "update_time",
    align: "center",
  },
  {
    title: "可操作API",
    width: "180px",
    key: "permission",
    customSlot: "permission",
    // fixed: "right",
    align: "center",
  },
  {
    title: "操作",
    width: "150px",
    fixed: "right",
    key: "action",
    ignoreExport: true,
    customSlot: "action",
    align: "center",
  },
]);
// // 分页不同部分的展示, 可改变顺序。
// const page_layout = ref(['count', 'prev', 'page', 'next', 'limits', 'refresh', 'skip'])
// // 分页选项
// const limits = ref([10, 20, 50])
const AddFormRef = ref(undefined);
const EditFormRef = ref(undefined);

const AddAuthRef = ref(undefined);
const EditAuthRef = ref(undefined);
const BindApiRef = ref(undefined);

// 搜索查询-刷新列表,强制刷新到第一页
const handleSearch = () => {
  queryParam.value.page = 1;
  loadData();
};

// // 分页查询
// const handlePageChange = (pag) => {
//   queryParam.value.page = pag.current;
//   queryParam.value.limit = pag.limit;
//   loadData();
// };

// 加载数据方法 必须为 Promise 对象
const loadData = () => {
  // 重置滚动高度
  // refreshScrollTop();

  isLoading.value = true;
  Api.list(queryParam.value)
    .then((response) => {
      const {
        data: { list },
      } = response;
      if (list) {
        // 数据列表
        data_list.value = list;
      }
    })
    .finally(() => {
      isLoading.value = false;
    });
};

// 默认加载数据
loadData();

// 新增记录
const handleAdd = () => {
  AddFormRef.value.show(data_list.value);
};

// 编辑记录
const handleEdit = (item) => {
  EditFormRef.value.show(data_list.value, item);
};

// 绑定API
const handleBindApi = (row, item) => {
  BindApiRef.value.show(row, item);
};

// 新增权限
const handleAddAuth = (item) => {
  AddAuthRef.value.show(item);
};

// 编辑权限
const handleEditAuth = (row, item) => {
  EditAuthRef.value.show(row, item);
};

// 删除记录
const handleDelete = (item) => {
  layer.confirm(
    "<p style='color:red;'><b>⇢</b>【" + item.name + "】<br/>删除后不可恢复!</p>",
    {
      title: "您确定要删除该记录吗? ",
      shade: true,
      shadeOpacity: 0.3,
      isHtmlFragment: true,
      btn: [
        {
          text: "确定",
          callback: (id) => {
            Api.deleted({ menuId: item["menu_id"] })
              .then((result) => {
                // 提示
                info(result.message);
                // 刷新数据
                handleSearch();
              })
              .finally(() => {
                layer.close(id);
              });
          },
        },
        {
          text: "取消",
          callback: (id) => {
            layer.close(id);
          },
        },
      ],
    }
  );
};
</script>
